.character-list-page {
  padding: 20rpx 32rpx;
  box-sizing: border-box;
  .character-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14rpx;
  }
  .character-item {
    width: 336rpx;
    height: 538rpx;
  }
  .popup-content {
    padding: 32rpx;
    background: #2B2D2D;
    border-radius: 12rpx 12rpx 0rpx 0rpx;
    .popup-content-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .popup-content-title-text {
        font-size: 28rpx;
        line-height: 40rpx;
        color: #ffffff;
        font-weight: 500;
      }
      .popup-content-title-icon {
        margin-left: 16rpx;
        width: 48rpx;
        height: 48rpx;
        display: block;
      }
    }
    .popup-content-body {
      margin-top: 32rpx;
      background: #393C3C;
      border-radius: 12rpx;
      .popup-content-body-item {
        font-size: 28rpx;
        line-height: 80rpx;
        color: rgba(255,255,255,0.8);
        text-align: center;
      }
    }
  }
}
